該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。
我們很常的會使用 v-on:click
的方式再我們網頁上面去觸發一些想做的事情,但是我們的網頁也會需要再手機上面去使用,click
事件雖然在手機上面也會有反應,但是畢竟是針對滑鼠點擊所設計的事件,在現代的行動裝置上面來說,click
事件功能細節稍稍不足,所以再行動裝置上面現在大多都改用 touch
事件來處理行動裝置上面的觸摸、滑動等。
這邊列出最常見的幾個 Touch Event
TouchEvent MDN : https://developer.mozilla.org/zh-TW/docs/Web/API/TouchEvent
當我今天手指點擊到手機上面的時候,事件的觸發下面這樣
touchstart -> touchmove -> touchend -> click
我們在網頁上面同時要監聽 touch 事件以及 click 事件
const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
console.log("touchstart event!")
})
Button.addEventListener("click", e => {
console.log("click event!")
})
在桌機上面touchstart
是不會有反應的
但是在手機上面就會照我們剛剛的順序,先執行了touchstart
然後再執行 click
事件
codeprn 範例 : https://codepen.io/MikeCheng1208/pen/VwWQVLE
為了讓行動裝置可以不要觸發 click
事件,我們可以加上 preventDefault()
來阻止 click
事件的觸發。
const Button = document.getElementById("targetButton");
Button.addEventListener("touchstart", e => {
e.preventDefault()
console.log("touchstart event!")
})
Button.addEventListener("click", e => {
e.preventDefault()
console.log("click event!")
})
codepen 範例 : https://codepen.io/MikeCheng1208/pen/dyRdQOQ
其實只要透過 Vue 的 Event Modifiers ( 事件修飾符 ) 就可以處理完成,
<button @click.prevent="clickFn" @touchstart.prevent="touchFn">touch click.</button>
codepen 範例 : https://codepen.io/MikeCheng1208/pen/zYzRMwR
使用 Event Modifiers 會讓你的 template 上面寫了兩個事件,某種程度看起來 html 上面有點掛太多東西了,而且還要寫兩個 function 裡面是執行一樣的內容,所以今天如果可以對於 v-on 事件去做動態的綁定,例如今天是用手機看的我就只綁定 @touchstart
,是桌機就是 @click
,那我就不用寫兩個 function,html上面也會比較單純,那我們來看一下怎麼做。
<script>
import { ref } from Vue;
export default {
setup(){
const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())
const events = ref(isMobile ? 'touchstart' : 'click');
const cluckAndTouchFn = () => {
console.log('cluck And touch Event')
}
return {
events,
cluckAndTouchFn
}
}
};
</script>
<template>
<button v-on:[events]="cluckAndTouchFn">touch click.</button>
</template>
ref
的 event name
,如果是手機就 return 'touchstart'
不然就是 click
v-on:[events]
的方式去動態的綁定事件。這樣一來我們就可以只針對裝置去判斷要綁定什麼事件上去,是非常好用的一個方法。
codepen 範例 : https://codepen.io/MikeCheng1208/pen/QWgQJQd
再手機上面還是使用 touch 事件會比較順暢跟靈敏,不過 click 事件也是堪用啦,但是如果需要更多的操作空間,那你真的可以考慮使用 touch 事件,不要嫌麻煩,那我們明天見啦~
Ps. 購買的時候請登入或註冊該平台的會員,然後再使用下面連結進入網站點擊「立即購課」,這樣才可以讓我獲得更多的課程分潤,還可以幫助我完成更多豐富的內容給各位。
我有開設了一堂專門針對Vue3從零開始教學的課程,如果你覺得不錯的話,可以購買我課程來學習
https://hiskio.com/bundles/9WwPNYRpz?s=tc
那如果對於JS基礎不熟的朋友,我也有開設JS的入門課程,可以參考這個課程
https://hiskio.com/bundles/b9Rovqy7z?s=tc
Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號,好友搜尋 @mike_cheng